<template>
    <!-- 图层 -->
    <div class="coverage">
        <functional title="图层" icon="fa fa-clone" type="coverage" options="left">
            <template #header>
                <div class="coverageHeader">
                    <div class="toolBtn">
                        <i class="fa fa-folder-open-o" title="新建文件夹" @click="newFolder"></i>
                    </div>
                    <div class="toolBtn">
                        <i class="fa fa-save" title="保存文档" @click="exportKML"></i>
                    </div>
                    <!-- <div class="toolBtn">
                        <i class="fa fa-arrow-up uploadFiles" title="上传瓦片图层" @click="uploadData.uploadDialog = true"> </i>
                    </div> -->
                    <div class="halfSeparate"></div>
                    <div class="toolBtn">
                        <i class="fa fa-unlock" title="锁定"></i>
                        <!-- <i class="fa fa-lock" title="解锁"></i> -->
                    </div>
                </div>
            </template>
            <div class="treeBox" @click="closeContextmenu" @contextmenu="closeContextmenu">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-tree
                        :data="store.treeData"
                        :props="defaultProps"
                        ref="coveragetree"
                        empty-text="数据加载中..."
                        node-key="id"
                        :highlight-current="true"
                        show-checkbox
                        @node-click="handleNodeClick"
                        @node-contextmenu="nodeContextmenu"
                        @node-expand="closeContextmenu"
                        @node-collapse="closeContextmenu"
                        @check="checkChange"
                    >
                        <template #default="{ node, data }">
                            <div class="treeBoxItems">
                                <div class="treeBoxItemsLeft">
                                    <i class="fa fa-lock" :style="{ marginRight: data.type == 'folder' ? '0px' : '10px' }" v-if="data.isLocked == 1" title="已锁定"></i>
                                    <el-image
                                        style="width: 12px; height: 12px; margin-top: 2px"
                                        v-if="data.icon"
                                        :src="data.icon.includes('http') ? data.icon : data.icon.includes('sxnf-cloud') ? `${drawUrl1}${data.icon}` : `${drawUrl}${data.icon}`"
                                        fit="cover"
                                    />
                                    {{ data.name }}
                                </div>
                                <div class="treeBoxItemsRight"><button @click.stop="moveUp(data)">上移</button><button link @click.stop="moveDown(data)">下移</button></div>
                            </div>
                        </template>
                    </el-tree>
                </el-scrollbar>
            </div>
        </functional>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { store, widget } from "@/utils/global";
import { defaultProps } from "@/config/config";
import { closeContextmenu, handleNodeClick, nodeContextmenu, checkChange, newFolder, handleClose, uploadXyzLayer, reselect, uploadFilesSubmit, moveUp, moveDown } from "@/utils/coverage/coverage";
// 图层树对象
const coveragetree = ref(null);
store.tree = coveragetree;
// 标绘图标url
const drawUrl = ref(import.meta.env.VITE_BASE_XYZ);
const drawUrl1 = ref(import.meta.env.VITE_BASE_ICON);
const exportKML = () => {
    console.log();
};
</script>
<style scoped lang="scss"></style>
